<template>
	<view class="ccessories-item">
		<view class="ccessories-name">
			{{ccessoriesName}}
		</view>
		<view class="price">价格：{{price}}￥</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			ccessoriesName: {
				type: String,
				default: "配件名",
				require: true
			},
			price: {
				type: Number,
				default: 200,
				require: true
			}
		}
	}
</script>

<style lang="scss">
	.ccessories-item {
		margin: 34rpx;
		width: 40vw;
		border-radius: 20rpx;
		background-color: #6c6c6c;
		// border: 1rpx solid #bbbbbb;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	
	.ccessories-name {
			text-align: center;
			// border: 1px solid black;
			width: 35vw;
			color: white;
			font-size: 50rpx;
			white-space: nowrap;
			/* 防止文本换行 */
			overflow: hidden;
			/* 隐藏溢出部分的文本 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}

		.price {
			color: #ffdd2f;
			font-size: 30rpx;
			margin-top: 30rpx;
		}
	}
</style>
